<template>
<el-drawer :title="dialog.title" :visible.sync="dialog.visible" size="100%">
    <div class="drawer-container">
        <el-tabs style="height: 200px;" @tab-click="handleTabClick" v-model="tabActive">
            <el-tab-pane label="宴会厅" name="hall">
                <div class="list-head">
                    <el-button type="primary" size="mini" @click="showEditHall()">添加宴会厅</el-button>
                </div>
                <el-table :data="hallTableData" border>
                    <el-table-column label="Id" prop="id" width="50"></el-table-column>
                    <el-table-column label="宴会厅名称" prop="title"></el-table-column>
                    <el-table-column label="容纳桌数" prop="tables"></el-table-column>
                    <el-table-column label="层高" prop="height"></el-table-column>
                    <el-table-column label="面积" prop="area"></el-table-column>
                    <el-table-column label="柱子" prop="pillar"></el-table-column>
                    <el-table-column label="大厅形状" prop="shape"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="showEditHall(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteHall(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="宴会菜单" name="menu">
                <div class="list-head">
                    <el-button type="primary" size="mini" @click="showEditMenu()">添加菜单</el-button>
                </div>

                <el-table :data="menuTableData" border>
                    <el-table-column label="Id" prop="id" width="50"></el-table-column>
                    <el-table-column label="菜单类型" prop="category"></el-table-column>
                    <el-table-column label="菜单名称" prop="title"></el-table-column>
                    <el-table-column label="价格" prop="price"></el-table-column>
                    <el-table-column label="x道菜" prop="num"></el-table-column>
                    <el-table-column label="头图" prop="titlepic">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.titlepic" class="image-size" :preview-src-list="[scope.row.titlepic]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="showEditMenu(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>

    <el-drawer :title="hallTitle" :visible.sync="hallDialogVisible" size="60%" :append-to-body="true" :before-close="hallDialogClose">
        <el-form class="drawerForm" ref="hallForm" :model="hallForm" :rules="hallRules" label-position="left" label-width="100px">
            <el-form-item label="宴会厅名称" prop="title">
                <el-input v-model="hallForm.title" placeholder="请输入宴会厅名称"></el-input>
            </el-form-item>

            <el-form-item label="标签" prop="tags">
                <el-checkbox-group v-model="hallForm.tags">
                    <el-checkbox v-for="tag in hallTags" :key="tag" :label="tag">{{ tag }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="容纳桌数" prop="tables">
                <el-input v-model="hallForm.tables" placeholder="请输入宴会厅名称"></el-input>
            </el-form-item>

            <el-form-item label="层高" prop="height">
                <el-input v-model="hallForm.height" placeholder="请输入宴会厅名称"></el-input>
            </el-form-item>

            <el-form-item label="面积" prop="area">
                <el-input v-model="hallForm.area" placeholder="请输入宴会厅面积"></el-input>
            </el-form-item>

            <el-form-item label="柱子" prop="pillar">
                <el-input v-model="hallForm.pillar" placeholder="请输入宴会厅柱子"></el-input>
            </el-form-item>

            <el-form-item label="大厅形状" prop="shape">
                <el-input v-model="hallForm.shape" placeholder="请输入宴会厅形状"></el-input>
            </el-form-item>

            <el-form-item label="婚宴Banner" prop="banquet_banner">
                <upload-files ref="banquetBannerRef" v-model="hallForm.banquet_banner" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="婚宴图集" prop="banquet_album">

                <upload-files ref="banquetAlbumRef" v-model="hallForm.banquet_album" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="生日宴Banner" prop="birthday_banner">
                <upload-files ref="birthdayBannerRef" v-model="hallForm.birthday_banner" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="生日宴图集" prop="birthday_album">
                <upload-files ref="birthdayAlbumRef" v-model="hallForm.birthday_album" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="会务头图" prop="meeting">
                <upload-picture ref="meetingRef" v-model="hallForm.meeting" placeholder="1张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-picture>
            </el-form-item>

            <!-- 会务Banner -->
            <el-form-item label="会务Banner图" prop="meeting_banner">
                <upload-files ref="meetingBannerRef" v-model="hallForm.meeting_banner" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item> 

            <!-- 会务图集 -->
            <el-form-item label="会务图集" prop="meeting_album">
                <upload-files ref="meetingAlbumRef" v-model="hallForm.meeting_album" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="会务" v-if="hallForm.id && hallForm.id > 0">
                <el-button type="primary" size="mini" @click="showAddShapeDialog()">添加会务厅形状</el-button>
                <el-table :data="hall_shapes" border style="margin-top: 10px;">
                    <el-table-column label="形状" prop="shape"></el-table-column>
                    <el-table-column label="形状图" prop="image">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.image" fit="cover" class="image-size" :preview-src-list="[scope.row.image]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="容纳桌数" prop="tables"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="showEditHallShape(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteHallShape(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <!-- status -->
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="hallForm.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input v-model="hallForm.sort" placeholder="请输入排序"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="hallDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleHallConfirm">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <el-drawer :title="shapeTitle" :visible.sync="shapeDialogVisible" size="60%" :append-to-body="true" :before-close="shapeDialogClose">
        <el-form class="drawerForm" ref="shapeForm" :model="shapeForm" :rules="shapeRules" label-position="top">
            <el-form-item label="形状" prop="shape">
                <el-radio-group v-model="shapeForm.shape">
                    <el-radio v-for="item in shapeOptions" :key="item" :label="item">{{ item }}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="容纳桌数" prop="tables">
                <el-input v-model="shapeForm.tables" placeholder="请输入容纳桌数"></el-input>
            </el-form-item>

            <el-form-item label="形状图" prop="image">
                <upload-picture ref="imageRef" v-model="shapeForm.image" placeholder="1张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-picture>
            </el-form-item>

            <el-form-item label="图集" prop="album">
                <upload-files ref="albumRef" v-model="shapeForm.album" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input v-model="shapeForm.sort" placeholder="请输入排序"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="shapeForm.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button @click="shapeDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleShapeConfirm">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <el-drawer :title="menuTitle" :visible.sync="menuDialogVisible" size="60%" :append-to-body="true" :before-close="menuDialogClose">
        <el-form class="drawerForm" ref="menuForm" :model="menuForm" :rules="menuRules" label-position="top">
            <el-form-item label="菜单类型" prop="category">
                <el-radio-group v-model="menuForm.category">
                    <el-radio label="婚宴">婚宴</el-radio>
                    <el-radio label="会务">会务</el-radio>
                    <el-radio label="宝宝宴">宝宝宴</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="菜单名称" prop="title">
                <el-input v-model="menuForm.title" placeholder="请输入菜单名称"></el-input>
            </el-form-item>

            <el-form-item label="菜单价格" prop="price">
                <el-input v-model="menuForm.price" placeholder="请输入菜单价格"></el-input>
            </el-form-item>

            <el-form-item label="菜数" prop="num">
                <el-input v-model="menuForm.num" placeholder="请输入菜数"></el-input>
            </el-form-item>

            <el-form-item label="菜单头图" prop="titlepic">
                <upload-picture ref="titlepicRef" v-model="menuForm.titlepic" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-picture>
            </el-form-item>

            <el-form-item label="菜单图集" prop="album">
                <upload-files ref="albumRef" v-model="menuForm.album" placeholder="10张;尺寸:1000*1000;格式:jpg,png,jpeg;大小:30M以内"></upload-files>
            </el-form-item>

            <el-form-item label="菜单备注" prop="remark">
                <el-input v-model="menuForm.remark" placeholder="请输入菜单备注"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="menuDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleMenuConfirm">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</el-drawer>
</template>

<script>
import {
    getHallListApi,
    addHallApi,
    updateHallApi,
    deleteHallApi,
    getShapeListApi,
    addShapeApi,
    updateShapeApi,
    deleteShapeApi,
    getMenuListApi,
    addMenuApi,
    updateMenuApi,
    deleteMenuApi
} from "@/api/system/dictionary/store";

import uploadFiles from '@/components/upload/files.vue';
import uploadPicture from '@/components/upload/picture.vue';
import uploadVideo from '@/components/upload/video.vue';

const hallForm = {
    id: "",
    store_id: "",
    title: "",
    tables: "",
    height: "",
    area: "",
    pillar: "",
    shape: "",
    banquet_banner: [], // 宴会头图
    banquet_album: [],  // 宴会图集
    birthday_banner: [], // 宴会头图
    birthday_album: [],  
    meeting: "",
    meeting_banner: [],
    meeting_album: [],
    sort: "",
    status: 1,
    tags: []
};

const shapeForm = {
    id: "",
    store_id: "",
    hall_id: "",
    shape: "",
    tables: "",
    image: "",
    album: [],
    sort: "",
    status: 1
};

const menuForm = {
    id: "",
    store_id: "",
    title: "",
    titlepic: "",
    price: "",
    num: "",
    album: [],
    category: "婚宴",
    remark: ""
}

export default {
    components: {
        uploadFiles,
        uploadPicture,
        uploadVideo
    },
    data() {
        return {
            dialog: {
                title: "",
                visible: false,
                type: "",
            },

            tabActive: 'hall',
            hallTableData: [],
            store_id: "",

            // hall 表单
            hallTitle: "",
            hallDialogVisible: false,
            hallForm: JSON.parse(JSON.stringify(hallForm)),
            hallTags: [
                'LED大屏',
                '舞台',
                '音响设备',
                '投影仪',
                '无线麦克风',
            ],
            hallRules: {
                title: [{
                    required: true,
                    message: "请输入宴会厅名称",
                    trigger: "blur"
                }],
                tables: [{
                    required: true,
                    message: "请输入宴会厅容纳桌数",
                    trigger: "blur"
                }],
                height: [{
                    required: true,
                    message: "请输入宴会厅层高",
                    trigger: "blur"
                }],
                area: [{
                    required: true,
                    message: "请输入宴会厅面积",
                    trigger: "blur"
                }],
                pillar: [{
                    required: true,
                    message: "请输入宴会厅柱子",
                    trigger: "blur"
                }],
                shape: [{
                    required: true,
                    message: "请输入宴会厅形状",
                    trigger: "blur"
                }],
                banquet_banner: [{
                    required: true,
                    message: "请上传宴会厅头图",
                    trigger: "blur"
                }],
                banquet_album: [{
                    required: true,
                    message: "请上传宴会厅图集",
                    trigger: "blur"
                }],
                birthday_banner: [{
                    required: true,
                    message: "请上传生日宴头图",
                    trigger: "blur"
                }],
                birthday_album: [{
                    required: true,
                    message: "请上传生日宴图集",
                    trigger: "blur"
                }],
                meeting: [{
                    required: true,
                    message: "请上传会务头图",
                    trigger: "blur"
                }],
                meeting_banner: [{
                    required: true,
                    message: "请上传会务头图",
                    trigger: "blur"
                }],
                meeting_album: [{
                    required: true,
                    message: "请上传会务图集",
                    trigger: "blur"
                }],
            },

            shapeOptions: [
                '宴会式',
                '课桌式',
                '剧院式',
            ],
            shapeTitle: "",
            shapeDialogVisible: false,
            hall_shapes: [],
            shapeForm: JSON.parse(JSON.stringify(shapeForm)),
            shapeRules: {
                shape: [{
                    required: true,
                    message: "请输入宴会厅形状",
                    trigger: "blur"
                }],
                tables: [{
                    required: true,
                    message: "请输入宴会厅容纳桌数",
                    trigger: "blur"
                }],
                album: [{
                    required: true,
                    message: "请上传宴会厅图集",
                    trigger: "blur"
                }]
            },

            menuTableData: [],
            menuTitle: "",
            menuDialogVisible: false,
            menuForm: JSON.parse(JSON.stringify(menuForm)),
            menuRules: {
                title: [{
                    required: true,
                    message: "请输入菜单名称",
                    trigger: "blur"
                }],
                titlepic: [{
                    required: true,
                    message: "请上传菜单头图",
                    trigger: "blur"
                }],
                price: [{
                    required: true,
                    message: "请输入菜单价格",
                    trigger: "blur"
                }],
                num: [{
                    required: true,
                    message: "请输入菜数",
                    trigger: "blur"
                }]
            }
        };
    },
    methods: {
        showDetailView(row) {
            this.store_id = row.id
            let dialog = {
                title: row.title,
                visible: true,
                type: "create",
            };
            this.dialog = dialog;
            this.fetchHallList(this.store_id);
        },

        handleTabClick(tab, event) {
            console.log(tab, event);
            if (tab.name === "hall") {
                this.fetchHallList(this.store_id);
            } else if (tab.name === "menu") {
                this.fetchMenuList(this.store_id);
            }
        },

        // 显示添加/编辑 宴会厅信息
        showEditHall(row) {
            this.hallTitle = row ? "编辑宴会厅信息" : "添加宴会厅信息";
            this.hallDialogVisible = true;
            if (row) {
                this.hallForm = row;
                // 获取会务厅形状列表
                this.fetchShapeList(this.store_id, row ? row.id : null);
            } else {
                this.hallForm = JSON.parse(JSON.stringify(hallForm));
                this.hall_shapes = [];
            }
        },

        // 获取宴会厅列表
        fetchHallList(store_id) {
            getHallListApi({
                store_id: store_id
            }).then(res => {
                if (res.code === 200) {
                    this.hallTableData = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

        // 关闭添加/编辑 宴会厅信息
        hallDialogClose() {
            this.hallDialogVisible = false;
            this.hallForm = JSON.parse(JSON.stringify(hallForm));
        },

        // 添加/编辑 宴会厅信息
        handleHallConfirm() {
            this.hallForm.store_id = this.store_id;
            this.$refs.hallForm.validate(valid => {
                if (valid) {
                    if (this.hallForm.id) {
                        updateHallApi(this.hallForm).then(res => {
                            if (res.code === 200) {
                                this.$message.success(res.msg);
                                this.hallDialogClose();
                                this.fetchHallList(this.store_id);
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch(err => {
                            this.$message.error(err.msg);
                        });

                    } else {
                        addHallApi(this.hallForm).then(res => {
                            if (res.code === 200) {
                                this.$message.success(res.msg);
                                this.hallDialogClose();
                                this.fetchHallList(this.store_id);
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch(err => {
                            this.$message.error(err.msg);
                        });
                    }
                } else {
                    console.log("表单验证失败");
                    return false;
                }
            });
        },

        // 删除宴会厅信息
        deleteHall(row) {
            this.$confirm(`确认删除${row.title}吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteHallApi({
                    id: row.id
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success(res.msg);
                        this.fetchHallList(this.store_id);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.$message.error(err.msg);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },

        // 显示menu编辑form
        showEditMenu(row) {
            this.menuTitle = row ? "编辑菜单信息" : "添加菜单信息";
            this.menuDialogVisible = true;
            if (row) {
                this.menuForm = row;
            } else {
                this.menuForm = JSON.parse(JSON.stringify(menuForm));
            }
        },

        fetchMenuList(store_id) {
            getMenuListApi({
                store_id: store_id
            }).then(res => {
                if (res.code === 200) {
                    this.menuTableData = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        menuDialogClose() {
            this.menuDialogVisible = false;
            this.menuForm = JSON.parse(JSON.stringify(menuForm));
        },

        handleMenuConfirm() {
            this.menuForm.store_id = this.store_id;
            this.$refs.menuForm.validate(valid => {
                if (!valid) return false;
                if (this.menuForm.id) {
                    updateMenuApi(this.menuForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success(res.msg);
                            this.menuDialogClose();
                            this.fetchMenuList(this.store_id);
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).catch(err => {
                        this.$message.error(err.msg);
                    })
                } else {
                    addMenuApi(this.menuForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success(res.msg);
                            this.menuDialogClose();
                            this.fetchMenuList(this.store_id);
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).catch(err => {
                        this.$message.error(err.msg);
                    })
                }
            })
        },

        fetchShapeList(store_id, hall_id) {
            // 获取会务厅形状列表
            getShapeListApi({
                store_id: store_id,
                hall_id: hall_id
            }).then(res => {
                if (res.code === 200) {
                    this.hall_shapes = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        showAddShapeDialog() {
            this.shapeTitle = "添加宴会厅形状";
            this.shapeDialogVisible = true;
            this.shapeForm = JSON.parse(JSON.stringify(shapeForm));
            this.shapeForm.store_id = this.store_id;
            this.shapeForm.hall_id = this.hallForm.id;

        },

        showEditHallShape(row) {
            this.shapeTitle = "编辑宴会厅形状";
            this.shapeDialogVisible = true;
            this.shapeForm = row;
        },

        shapeDialogClose() {
            this.shapeDialogVisible = false;
            this.shapeForm = JSON.parse(JSON.stringify(shapeForm));
        },

        handleShapeConfirm() {
            this.shapeForm.store_id = this.store_id;
            this.$refs.shapeForm.validate(valid => {
                if (!valid) return false;
                if (this.shapeForm.id) {
                    updateShapeApi(this.shapeForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success(res.msg);
                            this.fetchShapeList(this.store_id, this.shapeForm.hall_id);
                            this.shapeDialogClose();
                           
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).catch(err => {
                        this.$message.error(err.msg);
                    })
                } else {
                    addShapeApi(this.shapeForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success(res.msg);
                            this.fetchShapeList(this.store_id, this.shapeForm.hall_id);
                            this.shapeDialogClose();
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).catch(err => {
                        this.$message.error(err.msg);
                    })
                }
            })
        },

        deleteHallShape(row) {
            this.$confirm(`确认删除${row.shape}吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteShapeApi({
                    id: row.id
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success(res.msg);
                        this.fetchShapeList(this.store_id);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.$message.error(err.msg);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
    }
}
</script>

<style lang="less" scoped>
.drawer-container {
    padding: 20px;

    .list-head {
        padding: 10px 0;
    }
}

.image-size {
    width: 50px;
    height: 50px;
}

.drawerForm {
    padding: 16px;
}
</style>
